

<template>
   <router-link to="/" ><span style="margin-left:15px" >《</span></router-link>
  <span style="margin-left:120px;">美团外卖</span>
  <var-icon name="dots-vertical" style="transform:rotate(90deg);margin-left:80px"/>
  <span>|</span>
  <var-icon name="minus-circle-outline" />
  <span>|</span>
  <var-icon name="radio-marked" />
  <div>
    <var-icon name="magnify-plus-outline" style="color:#8d8d8d;position:absolute;left:23px;top:35px"/><input type="text" placeholder="请输入商家或商品名称" />
  </div>
  <div class="left">
    <div v-for="item in catelist" :key="item" class="left-box"  >
       {{item.name}}
      <p>{{item.num}}</p>
    </div>
  </div>

  <div class="right">
    
    <div v-for="item in catelist" :key="item" class="right-top">
        {{item.name}}
        <router-link to="/" ><div class="right-next">去频道></div></router-link>
        <div style="display: flex;flex-wrap:wrap;background: #fff;margin-top:5px;padding:15px 0px;">
        <div v-for="item2 in item.list" :key="item2" class="right-center">
            <router-link to="/" > <img :src="item2.pic" >
            <div>{{item2.name}}</div>
            <span>{{item2.num}}</span></router-link>
         </div>
         </div>
    </div>

  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { getallcate } from "../../api/allcate";
// export default defineComponent({
//   setup(){
//     return{
//        ...module1()
//     }
//   }
// })
// let module1=function(){
//    return{
//      aaa:[{id:8983,name:"美食",sname:[{a:1,b:2,c:3},{a:1,b:2,c:3},{a:1,b:2,c:3},{a:1,b:2,c:3}]},{id:3093,name:"甜点饮品"},{id:4462,name:"超市便利"},{id:297,name:"蔬菜水果"},{id:1484,name:"早餐"}
//      ,{id:483,name:"正餐优选"},{id:2044,name:"夜宵"},{id:804,name:"甜蜜蛋糕"},{id:2344,name:"家常菜"},{id:224,name:"能量西餐"}],

//    }
//}
let catelist = ref([]);

onMounted(() => {
  //发送请求，获取数据
  getallcate().then((data: any) => {
    console.log(data, "进来了没有");
    catelist.value = data.data.cate;
    console.log(catelist.value, "4444444444444444");
  });
});


</script>


<style lang="scss" scoped>
a{
  
  text-decoration: none;
  color:#868686 ;
}
input {
  width: 90%;
  height: 30px;
  border-radius: 15px;
  text-indent: 30px;
  background: #efefef;
  margin-bottom: 15px;
  margin-left: 5%;
  margin-top:10px ;
  border: 0px;
  outline: 0px;
}
.left {
  width: 20%;
  height: 600px;
  float: left;
  overflow: scroll;
  .left-box {
    height: 60px;
    padding: 5px;
    text-align: center;
    p {
      margin-top: 10px;
      background: #f6f6f6;
      font-size: 14px;
      color: #b6b5b4;
      border-radius: 10px;
    }
  }

  .left-box:hover {
    color: #ffa200;
    background: #f5f5f5;
    p:hover {
      color: #ffa200;
      background: #fff;
    }
  }
}
//  .left::-webkit-scrollbar{
//         display: none;
//     }
.right {
  width: 80%;
  height: 600px;
  overflow: scroll;
  float: right;
  background: #f5f5f5;
  box-sizing: border-box;
  padding: 10px;
  .right-top {
    text-align: left;
    padding: 5px;
    .right-next {
      float: right;
      color: #999794;
    }
    .right-center {
      width: 33%;
      text-align: center;
      img{
        width: 70px;
        height: 55px;
      }
      span {
        display: inline-block;
        box-sizing: border-box;
        padding: 0px 10px;
        background: #f6f6f6;
        margin-bottom: 10px;
        border-radius: 5px;
      }
    }
  }
}
</style>